<template>
  <div>
    <MapView @mapLoad="mapLoad" :center="center" :zoom="zoom"></MapView>
    <div class="bg">
		  <HeadBox title="安全生产"></HeadBox>

      <div class="main">
        <el-col :span="7">
          <ItemWrap style="height: 40vh;" title="企业行业分类">
            <safe-echarts1 />
          </ItemWrap>
          <ItemWrap style="height: 40vh; margin-top: 20px" title="企业信息">
            <safe-echarts2 />
          </ItemWrap>
        </el-col>
        <el-col :span="7" :offset="10">
          <ItemWrap style="height: 35vh;" title="企业经营范围分类">
            <safe-echarts3 />
          </ItemWrap>
          <ItemWrap style="height: 45vh; margin-top: 20px" title="街道企业分布情况">
            <safe-echarts4 />
          </ItemWrap>
        </el-col>
      </div>
    </div>

    <div id="maptools">
      <ul class="bar">
        <li @mouseover="handleOver()">
          <i class="icon icon-layer"> </i>
          <div class="menu-drop-wrap" ref="menuDropRef" @mouseout="handleOut()">
            <ul class="menu-list">
              <li v-for="item in mapDropdownList" :key="item.name">
                <el-checkbox
                  v-model="item.isCheck"
                  @change="changeCheckBox($event, item.name)"
                /><span>{{ item.name }} {{ item.num }}</span>
              </li>
            </ul>
          </div>
        </li>
        <li><i class="icon icon-point"></i></li>
        <li><i class="icon icon-plug" @click="handlePlug(1)"></i></li>
        <li><i class="icon icon-reduce" @click="handlePlug(2)"></i></li>
      </ul>
    </div>

		<info-window v-if="showDetail" :title="detail.name" @close="showDetail = false">
			<info-window-item label="企业名称：" :value="detail.name"></info-window-item>
			<info-window-item label="地址：" :value="detail.address"></info-window-item>
			<info-window-item label="成立时间：" :value="detail.foundDate.substring(0, 10)"></info-window-item>
			<info-window-item label="经营范围：" :value="detail.business"></info-window-item>
		</info-window>
  </div>
</template>

<script>
import MapView from '@/components/map-container/index.vue'
import InfoWindow from "@/components/info-window/index.vue";
import InfoWindowItem from "@/components/info-window/item.vue";

import SafeEcharts1 from '@/views/safe-production/echarts/safe-echarts1.vue'
import SafeEcharts2 from '@/views/safe-production/echarts/safe-echarts2.vue'
import SafeEcharts3 from '@/views/safe-production/echarts/safe-echarts3.vue'
import SafeEcharts4 from '@/views/safe-production/echarts/safe-echarts4.vue'

var timer
export default {
  name: 'human-resources',
  components: {
    MapView,
		InfoWindow,
		InfoWindowItem,
    SafeEcharts1,
    SafeEcharts2,
    SafeEcharts3,
    SafeEcharts4
  },
  data() {
    return {
      marklist: [],
      top: 60,
      center: [120.433655, 36.18505],
      zoom: 12, // 地图放大比例
      config: {
        header: ['<span style="color: #fff; font-weight: 700">经营项目</span>', '<span style="font-weight: 700">数量</span>'],
        headerHeight: 35,
        headerBGC: '#202D5A', // 表头0f1325
        oddRowBGC: '#202D5A', // 奇数行
        evenRowBGC: '#193670', // 偶数行
        // index: true,
        columnWidth: [250, 80],
        align: ['left', 'center'],
        data: []
      },
      mapDropdownList: [],
      showDetail: false,
      detail: {},
    }
  },
  mounted() {
  },
  methods: {
	  // 初始化地图
    mapLoad(amap) {
      this.map = amap

      this.getStreet()

      let _this = this
      AMap.plugin('AMap.DistrictSearch', function () {
        var district = new AMap.DistrictSearch({
          // 返回行政区边界坐标等具体信息
          extensions: 'all',
          // 设置查询行政区级别为 区 
          level: 'district'
        })

        district.search('李沧区', function(status, result) {
          // 获取朝阳区的边界信息
          var bounds = result.districtList[0].boundaries

          var polygons = []
          if (bounds) {
            for (var i = 0, l = bounds.length; i < l; i++) {
              //生成行政区划polygon
              var polygon = new AMap.Polygon({
                map: _this.map,
                strokeWeight: 1,
                path: bounds[i],
                fillOpacity: 0.4,
                fillColor: '#80d8ff',
                strokeColor: '#0091ea'
              })
              polygons.push(polygon)
            }
          }

          _this.map.add(polygons)
          // 地图自适应
          _this.map.setFitView(polygons); // 视口自适应
        })
      })
    },

    // 鼠标移入
    handleOver() {
      this.$refs.menuDropRef.style.display = "block";
    },
    // 鼠标移出
    handleOut() {
      this.$refs.menuDropRef.style.display = "none";
    },
    // 鼠标放大缩小
    handlePlug(type) {
      if (type === 1) {
        this.map.zoomIn();
      } else {
        this.map.zoomOut();
      }
    },
    // 监听复选框
    changeCheckBox(val) {
      let arr1 = [], arr2 = []
      arr1 = this.mapDropdownList.filter((tag) => tag.isCheck)
      arr2 = arr1.map((i) => {
        return `'${i.name}'`
      })
      this.getPoints(arr2.join(','));
    },

    // 获取街道
    getStreet() {
      this.$get('/safetyproduction/getStreet').then(res => {
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        }
        let arr = new Array()
        res.data.map((item) => {
          let obj = {
            isCheck: true,
            typeId: "",
            name: item.name,
            nums: item.value,
            data: [],
          }
          arr.push(obj)
        })
        
        this.mapDropdownList = arr

        let arr1 = [], arr2 = []
        arr1 = this.mapDropdownList.filter((tag) => tag.isCheck)
        arr2 = arr1.map((i) => {
          return `'${i.name}'`
        })
        this.getPoints(arr2.join(','));
      })
    },
    // 获取点位
    getPoints(val) {
      this.$get('/safetyproduction/queryPoint', {
        street: val
      }).then(res => {
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        }
        
        // 打印调用成功回调
        // if (this.marklist) {
        //   this.map.remove(this.marklist);
        //   this.marklist = []
        // }
        if (!this.map) {
          return
        }

        this.map.clearMap()

        this.marklist = res.data.map((item) => {
          // 创建marker点位标记
          var icon = new AMap.Icon({
            // 图标尺寸
            size: new AMap.Size(90, 90),
            // 图标的取图地址
            image: './icon-safe.png',
            // 图标所用图片大小
            imageSize: new AMap.Size(35, 35),
            // 图标取图偏移量
            imageOffset: new AMap.Pixel(0, 0)
          });
          var marker = new AMap.Marker({
            position: new AMap.LngLat(item.lng, item.lat),
            icon: icon,
            offset: new AMap.Pixel(-17, -35),
            extData: item
          });
          
          // marker.setClickable(true)
          
          // 点击点位查看详情
          marker.on('click', this.markerClick)
          return marker

          // this.marklist.push(marker)
        })
        this.map.add(this.marklist)
      })
    },
    //点位点击事件，展示信息窗体
    markerClick(e) {
      this.detail = e.target._opts.extData
      console.log(this.detail, '====this.detail=====')
      this.showDetail = true
    },
  }
}
</script>

<style lang="less" scoped>
.bg {
  background: url(../../assets/image/bg.png);
  background-size: 100% 100%;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  pointer-events: none;
  z-index: 997;
}
.main {
  display: flex;
  padding: 100px 50px 0;
  justify-content: space-between;
  height: 80vh;
}

#maptools {
  .menu-drop-wrap {
    height: auto;
  }
  .icon-layer {
    background: url('../../assets/image/icon/icon1.png') top no-repeat;
  }
  .icon-point {
    background: url('../../assets/image/icon/icon2.png') top no-repeat;
  }
  .icon-plug {
    background: url('../../assets/image/icon/icon3.png') top no-repeat;
  }
  .icon-reduce {
    background: url('../../assets/image/icon/icon4.png') top no-repeat;
  }
}
</style>
